import React, { useEffect } from 'react';
import { Form, Input, InputNumber, Select, DatePicker, Button, Row, Col } from 'antd';
import { productCategories, productStatuses } from '../../api/mockServeData/mockData';
import moment from 'moment';
const { Option } = Select;
const { TextArea } = Input;

const ProductForm = ({ 
  initialValues, 
  onFinish, 
  onCancel,
  loading = false 
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue({
        ...initialValues,
        createdAt: initialValues.createdAt ? moment(initialValues.createdAt) : null
      });
    } else {
      form.resetFields();
    }
  }, [initialValues, form]);

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onFinish}
      initialValues={initialValues || {
        status: 'draft',
        stock: 0,
        price: 0
      }}
    >
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item
            name="name"
            label="商品名称"
            rules={[{ required: true, message: '请输入商品名称' }]}
          >
            <Input placeholder="输入商品名称" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="category"
            label="商品分类"
            rules={[{ required: true, message: '请选择商品分类' }]}
          >
            <Select placeholder="选择商品分类">
              {productCategories.map(category => (
                <Option key={category.id} value={category.id}>
                  {category.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            name="price"
            label="价格"
            rules={[{ required: true, message: '请输入商品价格' }]}
          >
            <InputNumber 
              min={0} 
              step={0.01} 
              style={{ width: '100%' }} 
              formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
              parser={value => value.replace(/¥\s?|(,*)/g, '')}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="stock"
            label="库存数量"
            rules={[{ required: true, message: '请输入库存数量' }]}
          >
            <InputNumber 
              min={0} 
              style={{ width: '100%' }} 
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="status"
            label="商品状态"
            rules={[{ required: true, message: '请选择商品状态' }]}
          >
            <Select>
              {productStatuses.map(status => (
                <Option key={status.id} value={status.id}>
                  {status.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
      </Row>

      <Form.Item
        name="description"
        label="商品描述"
        rules={[{ max: 500, message: '描述不能超过500字符' }]}
      >
        <TextArea 
          rows={4} 
          placeholder="输入商品详细描述..." 
          showCount 
          maxLength={500} 
        />
      </Form.Item>

      {initialValues && (
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="createdAt"
              label="创建时间"
            >
              <DatePicker showTime disabled style={{ width: '100%' }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="updatedAt"
              label="最后更新时间"
            >
              <DatePicker showTime disabled style={{ width: '100%' }} />
            </Form.Item>
          </Col>
        </Row>
      )}

      <Form.Item className="form-actions">
        <Button onClick={onCancel} style={{ marginRight: 12 }}>
          取消
        </Button>
        <Button type="primary" htmlType="submit" loading={loading}>
          {initialValues ? '更新商品' : '创建商品'}
        </Button>
      </Form.Item>
    </Form>
  );
};

export default ProductForm;